<template>
  <el-dialog title="项目预算明细" :visible.sync="dialogVisible" :close-on-click-modal="false" :before-close="Cancel">
    <!-- {{ upoldid }} -->
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
      <el-form-item prop="val1" label="费用类型">
        <el-input v-model="dynamicValidateForm.val1"></el-input>
      </el-form-item>
      <el-form-item prop="val2" label="列支项目">
        <el-input v-model="dynamicValidateForm.val2"></el-input>
      </el-form-item>
      <el-form-item prop="val99" label="列支项目">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入内容"
          v-model="dynamicValidateForm.val99"
          style="width: 70%"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        v-for="(domain, index) in dynamicValidateForm.domains"
        :label="'金额' + index"
        :key="domain.key"
        :prop="'domains.' + index + '.value'"
      >
        <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="Cancel">取 消</el-button>
        <el-button @click="addDomain">新增金额</el-button>
        <el-button type="primary" @click="Cancel">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  props: ['dialogVisible', 'upoldid'],
  data() {
    return {
      dynamicValidateForm: {
        domains: [
          {
            value: ''
          }
        ],
        val1: '',
        val2: ''
      }
    }
  },
  methods: {
    Cancel() {
      this.$emit('update:dialogVisible', false)
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      })
    }
  }
}
</script>

<style scoped>
.el-input {
  width: 70%;
}
</style>
